<template>
  <div class="contents">
    <PanelTitle title="品种简介" />
    <div class="mt">
      <a-carousel :autoplay="false">
        <div>
          <div class="img-list">
            <div>
              <img class="img-item" src="@/assets/tzs/1-1.jpg" alt="" srcset="">
              <img class="img-item" src="@/assets/tzs/1-2.jpg" alt="" srcset="">
              <div class="img-text">柘参1号</div>
            </div>
            <div class="zs-text">柘参1号是在收集10个农家品种后，从中挑选出的3个性状比较相近的太子参，进行统一命名的品种。具有性状变化少、品质优良、产量稳定的优点，于2003年得到了福建省非主要农作物的品种认定。</div>
          </div>
        </div>
        <div>
          <div class="img-list">
            <div>
              <img class="img-item" src="@/assets/tzs/2-1.jpg" alt="" srcset="">
              <img class="img-item" src="@/assets/tzs/2-2.jpg" alt="" srcset="">
              <div class="img-text">柘参2号</div>
            </div>
            <div class="zs-text">柘参2号是在收搜集了无花种、白芽种等8种农家太子参品种后选育扩繁得到的。具有抗病能力较强、适应能力良好、产量高、药材质量好等优点，于2003年得到了福建省非主要农作物的品种认定。</div>
          </div>
        </div>
        <div>
          <div class="img-list">
            <div>
              <img class="img-item" src="@/assets/tzs/3-1.jpg" alt="" srcset="">
              <img class="img-item" src="@/assets/tzs/3-2.jpg" alt="" srcset="">
              <div class="img-text">柘参4号</div>
            </div>
            <div class="zs-text">柘参4号是以柘荣县栽培品种“柘参1号”为母本，以江苏句容县农家种“江苏种”为父本，通过杂交选育而成。具有产量大、浸出物比例高、抗病毒的特点，于2022年得到了福建省非主要农作物的品种认定。</div>
          </div>
        </div>
      </a-carousel>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import echarts from "@/components/echarts";
import PanelTitle from "../../component/PanelTitle.vue";
import http from "@/api/http";
import { env } from "@/utils/env";
const currentChose = ref(0)
</script>

<style scoped lang="scss">
.contents {
  background: linear-gradient(to bottom,
      rgba(5, 79, 99),
      rgba(5, 79, 99, 0.1),
      rgba(5, 79, 99));
  // background: #054f63ee;
  border-radius: vh(8);
  border: vh(1) solid rgba(6, 112, 180, 1);

}

.mt {
  margin-top: vh(-40);
  color: #fff;
  font-size: vh(12);
  padding: vh(10);
}

.maps {
  height: vh(190);
  width: 50%;
}

.infos {
  display: flex;
  align-content: center;
  margin: 0 vw(10);
}

table,
td,
tr,
th {
  border: vh(1) solid #2cd7bc;
  border-collapse: collapse;
  font-size: vh(9);
}

table {
  width: 50%;
  margin: vw(6) 0;
}

th {
  color: #fff;
  background: linear-gradient(to bottom,
      rgba(50, 200, 167, 0.45),
      rgba(50, 200, 167, 0.05));
  font-size: vh(10);
  padding: vh(6) 0;
}

td {
  color: #2cd7bc;
  text-align: center;
  font-size: vh(10);
  padding: vh(6) vw(3);
}

.choseTab {
  display: flex;
  align-items: center;
  margin: vh(10) vw(18);
}

.choseTab>div {
  width: vw(106);
  height: vh(31);
  line-height: vh(31);

  background: rgba(9, 37, 45, 0.95);
  border-radius: vh(5);


  border-radius: vh(5);
  border: vh(1) solid #c1fdc9;
  // border-image: linear-gradient(0deg, #c1fdc9, #90f9c4, ) 1 1;

  font-weight: 400;
  font-size: vh(14);
  color: #ffffff;
  text-align: center;
  margin-right: vh(10);

  cursor: pointer;
}

.choseTab>.active {
  background: rgba(20, 74, 88, 0.57);
  box-shadow: 0px 0px 22px 0px rgba(0, 235, 232, 0.42);
  border: 1px solid #19f7ff;
  color: #32c8a7;

}

.img-list {
  display: flex;
  justify-content: space-around;
  height: 25vh;
  color: #2cd7bc;
}

.img-item {
  width: 8vw;
  height: 8vh;
  display: block;
  margin:0 0  1vh 0 ;
  object-fit: contain;
}

.img-text {
  text-align: center;
  
}

.zs-text {
  width: 50%;
  font-size: vh(12);
  line-height: vh(28);
}
</style>